<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../../yl/index.css" />
  <link rel="stylesheet" href="../../style/index.css" />
  <title>文件信息</title>
</head>

<body>
  <div id="app" v-cloak>
    <div class="title">
      <div style="margin-bottom: 1%;">
        漠河总人数{{ totalMembers }}人
      </div>
      <div>
        姓名<el-input v-model="page.value1" style="width: 200px;margin:0 10px" placeholder="请输入姓名" clearable></el-input>
        身份证号<el-input v-model="page.value2" style="width: 200px;margin:0 10px" placeholder="请输入身份证号" clearable></el-input>
        <el-button icon="Search" style="margin: 0; margin-right: 10px;" @click="check">查询</el-button>
        <el-button icon="Refresh" style="margin: 0; margin-right: 10px;" @click="reset">重置</el-button>
        <el-button type="primary" icon="CirclePlus" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain
          round>添加</el-button>
          <!-- <el-upload style="display: inline-block;" ref="upload" action="" :on-change="(file)=>{this.handleUpload(file,row)}" :show-file-list="false" :auto-upload="false"> -->
            <el-button type="warning" icon="Download" style="margin: 0; margin-right: 10px;"  @click="import_data" plain
            round>批量导入
            </el-button>
          <!-- </el-upload> -->
        <!-- <el-button type="warning" icon="Download" style="margin: 0; margin-right: 10px;" @click="import_data" plain
          round>批量导入</el-button> -->
        <el-button type="success" icon="Upload" style="margin: 0; margin-right: 10px;" @click="Batchexport" plain
          round>批量导出</el-button>
        <!-- <el-button type="danger" icon="Delete" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain round>批量删除</el-button> -->
        <el-dropdown trigger="click" @command="(val)=>{this[val]()}">
          <el-button type="primary" style="margin: 0; margin-right: 10px;" :plain="!isShow" round>
            批量标记流动人口<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-if="!isShow" command="batchFlow">
                标记流动人口
              </el-dropdown-item>
              <el-dropdown-item v-if="!isShow" command="batchCancelFlow">
                取消流动人口标记
              </el-dropdown-item>
              <el-dropdown-item v-if="isShow" command="submitBatch">
                提交({{FlowType=='0'?'标记流动人口':'取消流动人口标记'}})
              </el-dropdown-item>
              <el-dropdown-item v-if="isShow" command="cancelBatch">
                取消
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button type="danger" v-if="isShow" style="margin: 0; margin-right: 10px;" @click="cancelBatch" plain round>取消</el-button>
      </div>
    </div>
    <div class="body">
      <div class="left">
        <el-tree ref="tree" default-expand-all :expand-on-click-node="false" id="tree" style="max-width: 600px"
          :data="treeData" @node-click="handleNodeClick" :props="{ label: 'Province' }">
          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <span>{{ node.label }}</span>
            </div>
          </template>
        </el-tree>
      </div>
      <div class="right">
        <!-- <el-button class="zdtype" @click="handleOpenDialog">设置显示字段</el-button> -->
        <el-tabs v-model="page.activeName"  type="card" @tab-click="handleClick">
          <el-tab-pane v-if="!(isShow&&FlowType=='1')" name="four">
            <template #label>
              <div style="width: 10px;height: 10px;background: linear-gradient(to right, #67C23A, #E6A23C, #F56C6C); margin-right: 10px;"></div>
              全部
            </template>
          </el-tab-pane>
          <el-tab-pane v-if="!(isShow&&FlowType=='1')" name="first">
            <template #label>
              <div style="width: 10px;height: 10px;background-color: #67C23A; margin-right: 10px;"></div>
              户籍人口
            </template>
          </el-tab-pane>
          <el-tab-pane v-if="!(isShow&&FlowType=='1')" name="second">
            <template #label>
              <div style="width: 10px;height: 10px;background-color: #E6A23C; margin-right: 10px;"></div>
              外来人口
            </template>
          </el-tab-pane>
          <el-tab-pane name="three">
            <template #label>
              <div style="width: 10px;height: 10px;background-color: #F56C6C; margin-right: 10px;"></div>
              流动人口
            </template>
          </el-tab-pane>
        </el-tabs>
        <el-table id="table" border :row-key="row=>row.ID_Card_Number"
          :data-options="JSON.stringify({ 'TableName': 'personal_information','primary_key':'ID_Card_Number'})"
          height="450" v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="Tabletdata" 
          @selection-change="handleSelectionChange">
          <el-table-column v-if="isShow" fixed="left" reserve-selection  :selectable="selectable" type="selection" width="40"></el-table-column>
          <el-table-column fixed="left" align="center" label="标识" width="60">
            <template v-slot="{row}">
              <div style="width: 100%; display: flex; justify-content: center;">
                <div :style="{...colors(row)}" style="width: 10px;height: 10px;border-radius: 50%;"></div>
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="180" v-for="column in columns" :key="column.COLUMN_NAME" :prop="column.COLUMN_NAME"
            :label="column.COLUMN_COMMENT">
            <template #scope="scope">
              <div :draggable="true" @dragstart="dragStart(scope.$index)" class="draggable-row">
                {{ scope.row[column.prop] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="160">
            <template #default="{row}">
              <div style="display: flex; align-items: center;">
                <el-button size="small" style="margin-right: 10px;" @click="handleEdit(row)">
                  编辑
                </el-button>
                <el-dropdown trigger="click">
                  <el-button size="small" type="danger">
                    更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="handleFlow(row)">
                        {{row.Flow_Personal=='0'?'标记流动人口':'取消流动人口标记'}}
                      </el-dropdown-item>
                      <el-dropdown-item @click="handlePoints(row)">
                        个人积分详情
                      </el-dropdown-item>
                      <el-dropdown-item @click="handleCopy(row)">
                        复制
                      </el-dropdown-item>
                      <!-- <el-dropdown-item v-if="row.Influencers=='0'" @click="handleWH(row)">
                        标记网红
                      </el-dropdown-item> -->
                      <el-dropdown-item @click="handleDelete(row)">
                        删除
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 1%;" :current-page="page.PageNumber" :page-size="page.RowAmount"
          :page-sizes="[10, 100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="Total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <el-dialog v-model="showDialog" width="550" class="custom-dialog">
      <template #header>
        <div class="dialog-header">
          <span>设置显示字段</span>
        </div>
      </template>
      <div class="dialog-content">
        <el-checkbox v-model="isAllChecked" @change="handleAllChecked" class="full-width-checkbox">全选</el-checkbox>
        <div class="checkbox-columns">
          <el-checkbox-group v-model="checkedFields" style="width: 100%; display: flex; flex-wrap: wrap">
            <el-checkbox :disabled="field.COLUMN_KEY === 'PRI'" v-for="field in fields" :key="field" :value="field"
              style="width: 50%; height: 30px; margin-right: 0px">
              {{ field.COLUMN_COMMENT }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="saveFields" class="confirm-btn">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  </div>
  <script src="../../utils/utils.js"></script>
  <script src="../../config/config.js"></script>
  <script src="../../utils/mixins.js"></script>
  <script src="../../yl/vue.js"></script>
  <script src="../../yl/index.js"></script>
  <script src="../../yl/zh-cn.mjs"></script>
  <script src="../../yl/index.iife.min.js"></script>
  <script src="../../yl/jquery.min.js"></script>
<script src="../../utils/jquery.cookie.js"></script>
  <script src="../../api/request.js"></script>
    <script src="../../utils/xlsx.full.min.js"></script>
  <script src="js/personal.js"></script>
</body>

</html>